<template>
	<!-- 首页【消息】 -->
	<view class="pd-30">
		<u-navbar back-icon-color="#fff" title-color="#fff" :title="tabName" :border-bottom="false"></u-navbar>
		<view class="container">
			<my-empty v-if="emptyFlase" emptyTit="暂无通知"></my-empty>
			<uni-swipe-action v-else>
				<uni-swipe-action-item class="noticeSwipe" :show="item.show" @click="delNotice($event, item,index)" v-for="(item,index) in list" :key="item.unid"  @open="open"
							:options="options">
					<view class="box" hover-class="hover">
						<view class="notice" @click="gotoLink(item)">
							<view class="content">
								<view class="title" >
									<view class="dot" v-show="!item.isRead"></view>
									<text class="text-ellipsis">{{item.name}}</text>
								</view>
								<view class="time">
									<my-icon name="time"></my-icon>
									<text>发布时间：{{ item.createtime }}</text>
								</view>
							</view>
							<my-icon name="bd-next" style="color:#ccc"></my-icon>
							<!-- <uni-icons type="arrowright"></uni-icons> -->
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	
	</view>
</template>

<script>

export default {
	data() {
		return {
			tabName: '系统通知',
			options: [
				{text: '删除',
				style: {backgroundColor: '#ef4c3a'},
			  }
			],
			list:[],
			emptyFlase:false
		};
	},
	onLoad() {
	},
	onShow(){
		this.init();
		this.$forceUpdate()
	},
	methods: {
		init() {
			this.list = [];
			return this.getPageData();
		},
		getPageData() {
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/teacher/home/getsystemNotice')
					.then(res => {
						this.list = res;
						this.emptyFlase=this.list.length>0?false:true
						resolve();
					})
					.catch(reject)
					.finally(() => {
						this.status !== 'nomore' && (this.status = 'loadmore');
					});
			});
		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.list[index].show = true;
			this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
			})
		},
		gotoLink(item){
			uni.navigateTo({
				url:'noticeDetail?noticeid='+item.unid
			})
		},
		delNotice(e, { unid },index) {
			// 删除通知
			this.request
				.get('/app/teacher/home/delNotice', {
					unid
				})
				.then(res => {
					this.list.splice(index, 1);
					uni.showToast({
						icon: 'none',
						title: '删除成功!'
					});
				});
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss">
.container {
	display: flex;
	flex-direction: column;
}
.box{
	padding: 0 30upx;
	width: 100%;
}
.notice {
	display: flex;
	align-items: center;
	position: relative;
	height: 150upx;
	flex: 1;
	// margin: 0 30upx;
	border-bottom: 1upx solid #EBEBEB;
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 70%;
		flex: 1;
	}
	.title {
		display: flex;
		align-items: center;
		font-size: 32upx;
		font-weight: 400;
		color: #363940;
		text {
			width: 550upx;
		}
	}
	.time {
		font-size: 26upx;
		font-weight: 400;
		color: #a6a6a6;
		display: flex;
		align-items: center;
		.iconfont {
			margin-right: 16upx;
		}
	}
}
.noticeSwipe:last-child{
	/deep/.uni-swipe_content::before{
		display: none!important;
	}
}
/deep/.uni-swipe_move-box{
	z-index: 2;
}
/deep/.noticeSwipe .uni-swipe_content{
	position: relative;
}
/deep/.uni-swipe_content::before{
	content: '';
	height: 1px;
	background-color: #000;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 30upx;
	right: 30upx;
}
.dot {
	width: 16upx;
	height: 16upx;
	margin-right: 16upx;
	background: #f45c4b;
	border-radius: 8upx;
}
</style>
